<!--  -->
<template>
  <div class='Edit'>
    <el-dialog
      title="进出场车辆编辑"
      :visible.sync="dialogVisible"
      width="60%"
      top="1vh"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-col
          :span="10"
          style="padding-left: 20px;"
        >
          <el-form-item
            label="商家名称："
            prop="companyId"
          >
            <!-- <el-input v-model="ruleForm.name"></el-input> -->
            <el-select
              v-model="ruleForm.companyId"
              filterable
              placeholder="选择商家名称"
              style="width:100%;"
            >
              <el-option
                v-for="(item,index) in CompanyList"
                :label="item.label"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="7"
          style="padding-left: 20px;"
        >
          <el-form-item
            label="车牌品牌："
            prop="carBrand"
          >
            <!-- <el-input v-model="ruleForm.carBrand"></el-input> -->
            <el-select v-model="ruleForm.carBrand">
              <el-option
                v-for="(item,index) in carBrandList"
                :value="item.name"
                :label="item.name"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="7"
          style="padding-left: 20px;"
        >
          <el-form-item
            label="车辆类型："
            prop="carType"
          >
            <!-- <el-input v-model="ruleForm.carType"></el-input> -->
            <el-select v-model="ruleForm.carType">
              <el-option
                v-for="(item,index) in carTypeList"
                :value="item.name"
                :label="item.name"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          v-if="activeName==1"
          :span="10"
          style="padding-left: 20px;"
        >
          <el-form-item
            label="车牌号："
            prop="carNumber"
          >
            <el-input v-model="ruleForm.carNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          v-if="activeName==0"
          :span="10"
          style="padding-left: 20px;"
        >
          <el-form-item
            label="车架号："
            prop="carFrameNo"
          >
            <el-input v-model="ruleForm.carFrameNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="7"
          style="padding-left: 20px;"
        >
          <el-form-item
            label="车辆颜色："
            prop="carColor"
          >
            <!-- <el-input v-model="ruleForm.carColor"></el-input> -->
            <el-select v-model="ruleForm.carColor">
              <el-option
                v-for="(item,index) in carColorList"
                :value="item.name"
                :label="item.name"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="7"
          style="padding-left: 20px;"
        >
          <el-form-item label="是否金融车：">
            <el-radio-group v-model="ruleForm.isFinanceCar">
              <el-radio :label=1>是</el-radio>
              <el-radio :label=0>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col
          :span="10"
          style="padding-left: 20px;"
        >
          <el-form-item label="是否收费：">
            <el-radio-group v-model="ruleForm.isFeeRequire">
              <el-radio :label=1>是</el-radio>
              <el-radio :label=0>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col
          :span="7"
          style="padding-left: 20px;"
        >
          <el-form-item label="停车费：">
            <el-input-number
              style="width:100%;"
              v-model="ruleForm.parkingFee"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
          :span="10"
          style="padding-left: 20px;"
        >
          <el-form-item label="备注:">
            <el-input
              v-model="ruleForm.remarks"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div>
        <el-col
          :span="24"
          style="padding-left: 20px;display:flex;"
        >
          <div style="padding-left:20px;width:120px;">车辆图片</div>
          <div style="padding-left:20px;">
            <el-upload
              action=""
              list-type="picture-card"
              :auto-upload="false"
              :on-remove="handleRemoveCar"
              :file-list="carList"
              :limit=1
              :on-change="getFile"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-col>
        <el-col
          :span="24"
          style="padding-left: 20px;display:flex;"
        >
          <div style="padding-left:20px;width:120px;">车辆入场图片</div>
          <div style="padding-left:20px;">
            <el-upload
              action=""
              list-type="picture-card"
              :auto-upload="false"
              :on-remove="handleRemoveIn"
              :file-list="carInList"
              :limit=1
              :on-change="getInFile"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-col>
        <el-col
          :span="24"
          style="padding-left: 20px;display:flex;"
        >
          <div style="padding-left:20px;width:120px;">车辆出场图片</div>
          <div
            style="padding-left:20px;"
            class="OutCar"
          >
            <el-upload
              action=""
              list-type="picture-card"
              :auto-upload="false"
              :on-remove="handleRemoveOut"
              :file-list="carOutList"
              :limit=1
              :on-change="getOutFile"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-col>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogVisible = false"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="dosubmit"
        >保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { putObj, CrCarType } from '@/api/crcar'
import { getCompanyByPhone } from "@/api/common"
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      ruleForm: {
        name: '',
        remarks: '',
        parkingFee: '',
        isFeeRequire: '',
        isFinanceCar: '',
        carFrameNo: '',
        carNumber: '',
        carColor: '',
        carType: '',
        carBrand: '',
        imgs: []
      },
      rules: {
        companyId: [{ required: true, message: '请选择公司名称', trigger: 'change' }],
        carBrand: [{ required: true, message: '请选择车辆品牌', trigger: 'change' }],
        carType: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
        carColor: [{ required: true, message: '请选择车辆颜色', trigger: 'change' }],
        carNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
        carFrameNo: [{ required: true, message: '请输入车架号', trigger: 'blur' }],
      },
      activeName: '',
      item: {

      },
      carList: [],
      carInList: [],
      carOutList: [],
      carChangeList: [],
      carInChangeList: [],
      carOutChangeList: [],
      CompanyList: [],
      carTypeList: [],
      carBrandList: [],
      carColorList: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getFile (file, carList) {
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        if (params.length > 0) {
          this.carList.push(params[1])
          this.carChangeList.push(params[1])
        }
      })
    },
    getInFile (file, carInList) {
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        if (params.length > 0) {
          this.carInList.push(params[1])
          this.carInChangeList.push(params[1])
        }
      })
    },
    getOutFile (file, carOutList) {
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        if (params.length > 0) {
          this.carOutList.push(params[1])
          this.carOutChangeList.push(params[1])
        }
      })
    },
    // 获取图片转base64
    getBase64 (file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    dosubmit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.imgs = []
          if (this.carChangeList.length > 0) {
            this.ruleForm.imgs.push(...this.carChangeList)
          } else {
            this.ruleForm.imgs.push('')
          }
          if (this.carInChangeList.length > 0) {
            this.ruleForm.imgs.push(...this.carInChangeList)
          } else {
            this.ruleForm.imgs.push('')
          }
          if (this.carOutChangeList.length > 0) {
            this.ruleForm.imgs.push(...this.carOutChangeList)
          } else {
            this.ruleForm.imgs.push('')
          }
          console.log(this.ruleForm.imgs)
          this.handleClose()
          putObj(this.ruleForm).then(data => {
            this.$message.success('保存成功')
            this.$emit("refresh")
          })
        } else {
          return false;
        }
      });
    },
    handleRemoveCar () {
      this.carList = []
      this.carChangeList = []
    },
    handleRemoveIn () {
      this.carInList = []
      this.carInChangeList = []
    },
    handleRemoveOut () {
      this.carOutList = []
      this.carOutChangeList = []
    },
    handleClose () {
      this.carList = []
      this.carOutList = []
      this.carInList = []
      this.dialogVisible = false
    },
    init (item, activeName) {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
      getCompanyByPhone().then(res => {
        this.CompanyList = res.data.data
      })
      CrCarType(1).then(res => {
        this.carTypeList = res.data.data
      })
      CrCarType(2).then(res => {
        this.carColorList = res.data.data
      })
      CrCarType(3).then(res => {
        this.carBrandList = res.data.data
      })
      this.item = JSON.parse(JSON.stringify(item))
      this.activeName = activeName
      this.ruleForm = JSON.parse(JSON.stringify(item))
      this.carList = []
      this.carOutList = []
      this.carInList = []
      setTimeout(() => {
        if (item.crCarFileList[0].url) {
          this.carList.push({ name: 'carList', url: item.crCarFileList[0].url })
        }
        if (item.crCarFileList[1].url) {
          this.carInList.push({ name: 'carOutList', url: item.crCarFileList[1].url })
        }
        if (item.crCarFileList[2].url) {
          this.carOutList.push({ name: 'carInList', url: item.crCarFileList[2].url })
        }
        this.dialogVisible = true
      }, 10)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>